---
title: Keystatic Cloud
summary: >-
  Keystatic Cloud takes care of GitHub authentication for you, and provides an
  opt-in image storage, optimisation and delivery service.
---
[Keystatic Cloud](https://keystatic.cloud) simplifies authentication (GitHub) with your projects. No need to deal with environment variables and a custom GitHub app.

Keystatic Cloud also offers opt-in products such as [Cloud Images](#cloud-images) (an image storage, optimisation and delivery service) or multi-player editing.

---

## Authentication

Keystatic Cloud lets you connect to GitHub and authenticate for one or multiple Keystatic projects.

It skips the more complicated process of [setting up GitHub mode](/docs/github-mode), while also allowing team members to edit content without needing a GitHub account.

## Teams and projects

Keystatic cloud organises projects into teams. Each team can have multiple projects, and each project is be connected to a specific GitHub repository.

User access is set at the team level, so every user in team will have access to all projects within that team.

## Free vs Pro plans

[Creating a Keystatic Cloud account](https://keystatic.cloud) is free. You can create as many teams and projects as needed.

The free plan allows for up to 3 users per team.

If you need more than 3 users on a given team, you'll need to upgrade that specific team to Pro. You can do so from the "billing" tab for that team.

Keystatic Cloud Pro starts at $10/month. Adding beyond 3 users to a team costs $5/month per user. 

A Pro plan only affects the one team it's applied to.

---

## Pro features

Besides allowing you to add more than 3 users to a team, Keystatic Cloud Pro also offers the following features:

- **Multi-player editing** (experimental): collaborate with other editors in real-time on the same document.
- **Cloud Images**: upload, transform and serve optimized images without cluttering your GitHub repository.

Once subscribed to Pro, you'll be able to enable these features on the settings tab of a given team.

---

## Cloud Images

Cloud Images is an opt-in image storage and delivery service that optimises your images for the web.

Each Keystatic Cloud project can have its own Image Library, where you can upload images and copy the URL to use in your content.

### Image optimisation via URL query parameters

When using Keystatic Cloude image URLs, you can pass the following optional query parameters to drastically improve the performance of your images:

- **`fit`** — how the image should be resized to fit the dimensions you specify. Possible values are `scale-down`, `contain`, `cover` and `crop`.
- **`format (f)`** — the image format to use. Possible values are `png`, `avif`, `webp` and `jpeg`. 
  If no format is provided, Keystatic Cloud will auto-detect browser capabilities and serve the most optimal format.
- **`quality (q)`** — the quality of the image. A number between `1` and `100`.
- **`height (h)`** — the height of the image. A number between `1` and `10240`.
- **`width (w)`** — the width of the image. A number between `1` and `10240`.

You can provide one or both of height and width, which will have a different effect based on the fit.

Here's an example URL with image transform query parameters: 

```
https://[IMAGE_URL]?width=240&height=480&fit=crop
```

### Cloud image field

Keystatic provides a [`cloudImage` field](/docs/fields/cloud-image), which can be used instead of the [regular image field](/docs/fields/image) if Keystatic is running in cloud mode, and the Image Library is enabled for the project.

### Cloud image component block (experimental)

Keystatic also provides a `CloudImage` component block, which can be used within the flow of a [document field](/docs/fields/document).

Again, you'll need Keystatic running in `cloud` mode, and have the Image Library enabled for the project.

{% aside icon="🚧" %}
Documentation for the `CloudImage` component block is coming soon.
{% /aside %}

---

## Configuring your project with Keystatic Cloud

In your Keystatic config, you'll need to set the `storage` option to `cloud`. 

You'll also need to add the `cloud.project` property with the name of the team and project from your Keystatic Cloud account:

```ts 
import { config } from '@keystatic/core'

export default config({
  storage: {
    kind: 'cloud',
  },
  cloud: {
    project: '[TEAM_NAME]/[PROJECT_NAME]',
  },
  ...
})
```

Each project in Keystatic Cloud has a settings page where you'll find a ready-to-paste code snippet in your config file.

---

## Screencast walk-through

This segment of the [Keystatic Mini-Course on YouTube](https://www.youtube.com/playlist?list=PLHrxuCR-0CcSmkyLcmdV7Ruql8DTm644k) may help understand how Keystatic Cloud works:

{% embed
   mediaType="video"
   embedCode="<iframe src=\"https://www.youtube.com/embed/S_0333JEs6w?si=mDDK52Nlhg4v1v9x\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>" /%}